<!--素材选择器-->
<template>
  <div class="materialSelection-container">
    <el-tabs v-model="activeName" class="common-tabs">
      <el-tab-pane name="text">
        <span slot="label"><i class="el-icon-notebook-2" /> 文本</span>
      </el-tab-pane>
      <el-tab-pane name="image">
        <span slot="label"><i class="el-icon-picture" /> 图片</span>
      </el-tab-pane>
      <el-tab-pane name="audio">
        <span slot="label"><i class="el-icon-microphone" /> 语音</span>
      </el-tab-pane>
      <el-tab-pane name="video">
        <span slot="label"><i class="el-icon-video-play" /> 视频</span>
      </el-tab-pane>
      <el-tab-pane name="imageText">
        <span slot="label"><i class="el-icon-takeaway-box" /> 图文</span>
      </el-tab-pane>
    </el-tabs>
    <div class="flex-main content-selection-container">
      <div>
        <template v-if="activeName==='text'">
          <el-input
            v-model="textContent"
            :rows="4"
            type="textarea"
            maxlength="500"
            show-word-limit
            placeholder="请输入文本内容" />
        </template>
        <template v-else>
          {{ materials }}
        </template>
      </div>
      <div style="text-align: center; padding-top: 50px;">
        <el-button type="success" @click="handleSelectMaterial">素材库选择<i class="el-icon-circle-check  el-icon--right" /></el-button>
      </div>
    </div>
    <model-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="800px"
      :show-close="false"
      @close="dialogVisible=!dialogVisible">
      <template v-if="activeName==='imageText'">
        1
      </template>
      <template v-else>
        <material-library mode="select" :type="activeName" :app-id="appId" />
      </template>
    </model-dialog>
  </div>
</template>
<script>
import materialLibrary from '../materialLibrary.vue'
export default {
  components: { materialLibrary },
  props: {
    appId: {
      type: String,
      required: true
    }
  },

  data() {
    return {
      textContent: '',
      activeName: 'text',
      dialogVisible: false,
      dialogTitle: '选择文本',
      materials: []
    }
  },
  watch: {
    activeName: function(val) {
      if (val === 'text') {
        this.dialogTitle = '选择文本'
      }
      if (val === 'image') {
        this.dialogTitle = '选择图片'
      }
      if (val === 'audio') {
        this.dialogTitle = '选择语音'
      }
      if (val === 'video') {
        this.dialogTitle = '选择视频'
      }
      if (val === 'imageText') {
        this.dialogTitle = '选择图文'
      }
    }
  },
  methods: {
    handleSelectMaterial() {
      this.dialogVisible = true
    },
    fetchData() {
      this.$store.dispatch('thirdWechatMenuArticleGetByMenuId', 1).then((res) => {
        this.materials = res
      }).catch((_) => {})
    }
  }

}
</script>
<style lang="scss" scoped >
.materialSelection-container{
  .content-selection-container{
      padding: 15px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}
</style>
